import { computed } from 'vue'
import store from '@/store'

// 公共UI组件
import FormItem from '../form/FormItem.vue'
import BaseForm from '../form/BaseForm.vue'
import BaseInput from '../form/BaseInput.vue'
import BaseSelect from '../form/BaseSelect.vue'

// 移动端组件
import MobileCard from '../card/MobileCard.vue'
import MobileUpload from '../form/MobileUpload.vue'
import BottomNav from '../navigation/BottomNav.vue'

// 基础UI组件
import LoadingSpinner from './LoadingSpinner.vue'
import EmptyState from './EmptyState.vue'
import ConfirmDialog from './ConfirmDialog.vue'
import BaseTag from './BaseTag.vue'
import Toast from './Toast.vue'
import Pagination from './Pagination.vue'
import Switch from './Switch.vue'
import ChartCard from './ChartCard.vue'
import Card from './Card.vue'

// 导出所有组件
export {
  LoadingSpinner,
  EmptyState,
  ConfirmDialog,
  BaseTag,
  Toast,
  Pagination,
  Switch,
  ChartCard,
  Card
}

// 批量注册组件的插件
export default {
  install(app) {
    // 注册基础组件
    app.component(LoadingSpinner.name, LoadingSpinner)
    app.component(EmptyState.name, EmptyState)
    app.component(ConfirmDialog.name, ConfirmDialog)
    app.component(BaseTag.name, BaseTag)
    app.component(Toast.name, Toast)
    app.component(Pagination.name, Pagination)
    app.component(Switch.name, Switch)
    app.component(ChartCard.name, ChartCard)
    app.component(Card.name, Card)
    
    // 注册表单组件
    app.component('FormItem', FormItem)
    app.component('BaseForm', BaseForm)
    app.component('BaseInput', BaseInput)
    app.component('BaseSelect', BaseSelect)
    
    // 注册移动端组件
    app.component('MobileCard', MobileCard)
    app.component('MobileUpload', MobileUpload)
    app.component('BottomNav', BottomNav)
    
    // 添加全局属性
    app.config.globalProperties.$isMobile = computed(() => {
      return store.state.app.device === 'mobile'
    })
    
    // 添加全局辅助方法
    app.config.globalProperties.$toast = (message, type = 'info', duration = 3000) => {
      store.dispatch('app/showMessage', { content: message, type, duration })
    }
    
    // 注册自定义指令
    app.directive('ripple', {
      mounted(el) {
        el.classList.add('ripple')
        
        el.addEventListener('click', e => {
          const rect = el.getBoundingClientRect()
          const x = e.clientX - rect.left
          const y = e.clientY - rect.top
          
          const ripple = document.createElement('span')
          ripple.className = 'ripple-effect'
          ripple.style.left = `${x}px`
          ripple.style.top = `${y}px`
          
          el.appendChild(ripple)
          
          setTimeout(() => {
            ripple.remove()
          }, 600)
        })
      }
    })
  }
} 